<template>
	<view class="container">
		<view class="top flex-cenetr-wrap">
			<view class="now-Balance">300</view>
			<view class="now-Account">当前KING币数</view>
		</view>
		<view class="banner flex-between padding20">
			<view class="date">
				<!-- <dropdown :list="list" :current="current" @onClick="dropDownChange"></dropdown> -->
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="sex-select flex">
						<view class="uni-input">{{array[index]}}</view>
						<view class="iconfont icon-arrow-backimg"></view>
					</view>
				</picker>
			</view>
		</view>
		<view class="irrgation flex-between padding20" v-for="(item,index) in irrgationList" :key='index'>
			<view class="i-left flex">
				<view class="i-logo flex-cenetr">
					<text>{{item.irrgationName}}</text>
				</view>
				<view class="i-l-text">
					<view class="consume">{{item.consumeName}}</view>
					<view class="date-time">
						<text>{{item.date}}</text>
						<text>{{item.time}}</text>
					</view>
				</view>
			</view>
			<view class="i-right flex-between">
				<view class="consume-mony">{{item.mony}}</view>
				<view class="iconfont icon-arrow-backimg"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:['一个月','两个月','近3个月'],
				current:0,
				index:0,
				array:['一个月','两个月','近3个月'],
				irrgationList:[
					{
						'irrgationName':'渠道一',
						'consumeName':'充值',
						'date':'2020/02/05',
						'time':'12:00:00',
						'mony':'+2000币'
					},
					{
						'irrgationName':'渠道一',
						'consumeName':'兑换商品',
						'date':'2020/02/05',
						'time':'12:00:00',
						'mony':'-300币'
					},
					{
						'irrgationName':'渠道二',
						'consumeName':'消费',
						'date':'2020/02/05',
						'time':'12:00:00',
						'mony':'-2000币'
					}
				]
			}
		},
		methods:{
			dropDownChange(e){
				console.log(e)
				this.current = e;
			},
			bindPickerChange(e) { //0-男 1-女
				console.log(e.target.value)
				this.index = e.target.value
			},
		}
	}
</script>

<style>
	@import url("../../common/css/iconfont.css");
	@import url("../../common/css/common.css");

	.top {
		width: 100%;
		height: 322rpx;
		background-color: rgba(43, 34, 32, 1);
		color: #fff;
	}

	.now-Balance {
		font-size: 60rpx;
		margin-bottom: 30rpx;
	}

	.padding20 {
		padding: 0 20rpx;
	}
	.sex-select{
		height: 100rpx;
	}
	.flex{
		display: flex;
		align-items: center;
	}
	.irrgation{
		height: 140rpx;
		margin-bottom: 2rpx;
		background-color: #ccc;
	}
	.i-left .i-logo{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1px solid;
		font-size: 24rpx;
		margin-right: 20rpx;
	}
	.consume-mony{
		margin-right: 20rpx;
	}
	.date-time text:first-child{
		margin-right: 20rpx;
	}
</style>
